<script setup lang="ts">
import { ref, onMounted } from 'vue'

import request from '@/utils/request'

import SelectPopup from '@/components/select-popup/select-popup.vue'

type ModeType = 'single' | 'multiple'
type ColumnItem = { text: string; value: string }
type ListItem = {
  type: string
  text?: string
  value: string[]
  columns: ColumnItem[]
}

let current: ListItem

const show = ref(false)
const mode = ref<ModeType>('single')

const list = ref<ListItem[]>()
const selected = ref<string[]>()
const columns = ref<ColumnItem[]>()

onMounted(() => init())

/**
 * 初始化
 */
const init = () => {
  getList()
}

/**
 * 获取数据
 */
const getList = async () => {
  list.value = await request<ListItem[]>('/mock/list', 'GET')
}

/**
 * 显示
 */
const handleShow = (value: ListItem) => {
  switch (value.type) {
    case 'radio':
      mode.value = 'single'
      break
    case 'checkbox':
      mode.value = 'multiple'
      break
  }

  current = value
  selected.value = value.value
  columns.value = value.columns

  show.value = true
}

/**
 * 选择
 */
const handleSelect = (value: string[]) => {
  if (value.length === 0) return
  current.value = value

  const map = current.columns.reduce(
    (accu: any, item) => ~(accu[item.value] = item.text) && accu,
    {}
  )
  switch (current.type) {
    case 'radio':
      current.text = map[value[0]]
      break
    case 'checkbox':
      current.text = value.map((item) => map[item]).join('/')
      break
  }
}

/**
 * 关闭
 */
const handleClose = () => (show.value = false)
</script>

<template>
  <div class="page">
    <div class="content">
      <div class="content__row" v-for="(item, index) in list" :key="index">
        <div class="content__label" v-if="item.type === 'radio'">单选</div>

        <div class="content__label" v-if="item.type === 'checkbox'">多选</div>

        <div class="content__wrapper" @click="() => handleShow(item)">
          <template v-if="item.value.length === 0">
            <span class="content__placeholder"> 请选择 </span>

            <img
              class="content__icon--arrow"
              src="@/assets/image/23772@2x.png"
            />
          </template>

          <template v-else>
            <span class="content__value" @click="() => handleShow(item)">
              {{ item.text }}
            </span>

            <img
              class="content__icon--arrow"
              src="@/assets/image/20883@2x.png"
              @click="() => handleShow(item)"
            />
          </template>
        </div>
      </div>
    </div>

    <SelectPopup
      :mode="mode"
      :show="show"
      :columns="columns!"
      :selected="selected!"
      @close="() => handleClose()"
      @confirm="(event) => handleSelect(event)"
    ></SelectPopup>
  </div>
</template>

<style scoped lang="scss">
.page {
  padding: 12px 16px 16px;
}

.content {
  padding: 16px;
  border-radius: 8px 8px 8px 8px;
  background-color: #fff;

  &__row {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 16px 0;

    font-size: 14px;
  }

  &__row:first-child {
    padding-top: 0;
  }

  &__row:last-child {
    padding-bottom: 0;
  }

  &__row + &__row {
    border-top: 1px solid #ececec;
  }

  &__wrapper {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
  }

  &__label {
    flex-shrink: 0;
    width: 30px;
  }

  &__placeholder {
    color: #99989b;
  }

  &__icon {
    &--arrow {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
